<template>
  <div class="index">
    <div class="header">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push({ name: 'Search' })">
        <van-icon name="search" />
        <span>搜索商品</span>
      </div>
      <div class="user" @click="$router.push({ path: `/personal/${id}` })">
        <van-icon name="manager-o" />
      </div>
    </div>
    <!-- active 当前被激活的标签项的索引 -->
    <van-tabs v-model="active" sticky swipeable>
      <van-tab
        v-for="(value, index) in CateList"
        :title="value.name"
        :key="index"
      >
        <van-list
          v-model="value.loading"
          :finished="value.finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <van-pull-refresh v-model="value.isLoading" @refresh="onRefresh">
            <articleblock v-for="(v, i) in value.postList" :key="i" :post="v">
            </articleblock>
          </van-pull-refresh>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 分类栏目
import { getCateList } from "@/api/category.js";
import { getArticleList } from "@/api/article";
import articleblock from "@/components/articleblock.vue";

export default {
  data() {
    return {
      id: "-1",
      active: localStorage.getItem("hm_toutiao_56") ? 1 : 0,
      CateList: [],
    };
  },
  components: {
    articleblock,
  },
  methods: {
    async init() {
      // 获取对应栏目（头条）的新闻数据
      let articleList = await getArticleList({
        category: this.CateList[this.active].id,
        pageIndex: this.CateList[this.active].pageIndex,
        pageSize: this.CateList[this.active].pageSize,
      });
      // console.log(articleList);
      // 将获取到的文章数据存储到当前栏目的postList中
      // this.CateList[索引].postList = articleList.data.data;
      this.CateList[this.active].postList.push(...articleList.data.data);
      // console.log(this.CateList);
      // 将上拉加载组件的loading重置为false;
      this.CateList[this.active].loading = false;
      // 重置下拉isloading
      this.CateList[this.active].isLoading = false;
      // 如果没有数据了，应该将上拉组件的finished重置为true
      // 没有数据的判断是：这次获取的数据的条数小于pageSize
      if (articleList.data.data.length < this.CateList[this.active].pageSize) {
        this.CateList[this.active].finished = true;
      }
    },
    onLoad() {
      this.CateList[this.active].pageIndex++;
      setTimeout(() => {
        console.log(1);
        this.init();
      }, 2000);
    },
    // 下拉刷新的触发事件
    onRefresh() {
      // 页码重置为1
      this.CateList[this.active].pageIndex = 1;
      // 数据清空
      this.CateList[this.active].postList.length == 0;
      // 重置finished
      this.CateList[this.active].finished = false;
      this.init();
    },
  },
  watch: {
    active() {
      console.log(this.active); //当前所激活标签索引
      // 需要重新加载当前的栏目新闻数据
      // 细节注意：只有当前栏目没有文章数据的时候，我们才需要重新加载数据,，否则直接展示
      if (this.CateList[this.active].postList.length == 0) {
        this.init();
      }
      // this.init();
    },
  },
  async mounted() {
    if (localStorage.getItem("hm_toutiao_56")) {
      this.id = JSON.parse(localStorage.getItem("hm_toutiao_56")).user.id;
      //   console.log(this.id);
    }
    // 栏目管理中进行的本地存储与首页栏目数据的关联：
    // 如果本地储存中有数据，数据来源为本地存储中的数据+手动添加“关注”和“头条”（根据用户登录状态觉得添加）
    // 如果本地存储中没有数据，则向服务器发送请求
    // 数据来源不一样
    if (localStorage.getItem("hasCateList")) {
      this.CateList = JSON.parse(localStorage.getItem("hasCateList"));
      if (localStorage.getItem("hm_toutiao_56")) {
        this.CateList.unshift(
          { id: 0, name: "关注", is_top: 1 },
          { id: 999, name: "头条", is_top: 1 }
        );
      } else {
        this.CateList.unshift({ id: 999, name: "头条", is_top: 1 });
      }
    } else {
      // 分类栏目获取
      let res = await getCateList();
      this.CateList = res.data.data;
    }

    // 对栏目数据进行改造，以满足当前页面的业务需求
    // 具体的改造有：添加一个数组用于存储当前栏目的文章列表数据  arr.map()
    this.CateList = this.CateList.map((v) => {
      return {
        ...v,
        postList: [],
        pageIndex: 1,
        pageSize: 5,
        loading: false,
        finished: false,
        isLoading: false,
      };
    });
    console.log(this.CateList);

    // // 获取对应栏目（头条）的新闻数据
    // let articleList = await getArticleList({
    //   category: this.CateList[this.active].id,
    //   pageIndex: this.CateList[this.active].pageIndex,
    //   pageSize: this.CateList[this.active].pageSize,
    // });
    // // 将获取到的文章数据存储到当前栏目的postList中
    // // this.CateList[索引].postList = articleList.data.data;
    // this.CateList[this.active].postList = articleList.data.data;
    // // console.log(this.CateList);
    this.init();

    // 实现伪元素事件的触发： 伪元素实际不存在，不能直接获取到伪元素
    document.querySelector(".van-sticky").onclick = (e) => {
      // console.log(e.target.className);
      if (e.target.className == "van-sticky") {
        this.$router.push({ path: "/cateManager" });
      }
    };
  },
};
</script>

<style lang="less" scoped>
// 栏目入口添加方法：
// 插件中的结构不能修改，所以通过修改CSS样式进行：伪元素添加“+”
/deep/.van-sticky {
  padding-right: 50px;
  &::after {
    content: "+";
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}
.index {
  .header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: #f00;
    align-items: center;
    color: #fff;
  }
  .search {
    flex: 1;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    .van-icon {
      font-size: 16px;
    }
  }
  .van-icon {
    font-size: 24px;
    padding: 0 10px;
  }
  .iconfont {
    font-size: 50px;
    padding: 0 10px;
  }
}
</style>